import React from 'react';
import { ArrowLeft } from '@nutui/icons-react';
import { Button, Card, Tag, Divider, Col, Row } from 'antd';
import { useNavigate } from 'react-router-dom';
import { Ellipsis, Cell, Toast } from '@nutui/nutui-react';
import axios from 'axios';
import './Maint.css';
import { useState } from 'react';
import { useEffect } from 'react';

export default function Maint() {
  const navigate = useNavigate();
  const [maints, setMaints] = useState([]);

  useEffect(() => {
    getMaint();
  }, []);

  let getMaint = async () => {
    let res = await axios.get('http://localhost:3000/jwh/getMaint');
    let { code, maints } = res.data;
    setMaints(maints);
  };

  return (
    <div>
      <div className='MyHouse_top'>
        <ArrowLeft className="back-icon" width={"40px"} onClick={() => window.history.back()} />
        <span className="title-text">维修上报</span>
      </div>
      <div className='Maint_content'>
        <div className="data-container">
          {maints.map(item => {
            return (
              <Card
                hoverable={true}
                style={{ width: '80%', margin: '10px auto' }}
                className="custom-card"
                key={item._id}
              >
                <span style={{ fontSize: '14px', fontWeight: 'bold' }}>{item.content}</span>
                <Tag style={{ float: 'right' }} color={item.status? 'red' : 'green'}>{item.status ? '维修中' : '审核中'}</Tag>
                <Divider />
                <Row>
                  <Col span={12} style={{ textAlign: 'center' }}>报修房屋</Col>
                  <Col span={12}>{item.address}</Col>
                </Row>
                <Row>
                  <Col span={12} style={{ textAlign: 'center' }}>报修项目</Col>
                  <Col span={12}><Ellipsis content={`${item.type}-${item.title}`} direction="end" rows="1" /></Col>
                </Row>
                <Row>
                  <Col span={12} style={{ textAlign: 'center' }}>预约日期</Col>
                  <Col span={12}>
                    <Ellipsis content={item.time} direction="end" rows="1" />
                  </Col>
                </Row>
              </Card>
            );
          })}
        </div>
        <Button size='large' color='danger' style={{ width: "80%", marginLeft: '40px' }} onClick={() => navigate('/maintItem')}>申请维修</Button>
      </div>
    </div>
  );
}